<template>
<!-- 历史记录和热门搜索 -->
    <div class="history-hot">
        <div class="his-hot">
            <div class="his">
                <h4>历史记录</h4>
                <van-icon name="delete-o" @click="Delete()"/>
            </div>
            <div class="tag">
                <van-tag plain type="default" v-for="(v,k) in historyKeywordList" :key="k" @click="Gethis(v)">{{v}}</van-tag>
            </div>
        </div>
        <div class="his-hot">
            <div class="hot">
                <h4>热门搜索</h4>
            </div>
            <div class="tag"  >
                <van-tag :color="v.is_hot?'red':''" plain type="default" v-for="(v,k) in hotKeywordList" :key="k" @click="Gethot(v.keyword)">{{v.keyword}}</van-tag>
            </div>
        </div>
    </div>
</template>

<script>
import {Deletelist} from '@/request/api.js'
export default {
    data(){
        return{

        }
    },
    props:['historyKeywordList','hotKeywordList'],
    methods:{
        Gethis(v){
            this.$emit('parhislistchange',v)
        },
         Gethot(m){
            this.$emit('parhislistchange2',m)
        },
        Delete(){
            Deletelist().then(res=>{
                // console.log(res);
                this.$emit('parDel',res.data)
            })
        }
    }
}
</script>

<style lang="less">
 .his-hot{
     background-color: white;
     margin-bottom: 1.5rem;
     padding:4%;
 }
 h4{
     color: #333;
 }
 .his{
     display: flex;
     justify-content: space-between;
 }
 .hot{
     height:0;
     margin-top: 0;
     margin-bottom: 0;
     padding-bottom: 2rem;
 }
 .tag{
     margin-top:.50rem;
     
 }
 .van-tag{
   margin-right:.50rem;
   padding:.005rem ;
 }
</style>